<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理界面</title>
    <link rel="stylesheet" th:href="@{/X-admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/X-admin/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/X-admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/X-admin/js/xadmin.js}"></script>
</head>
<body>
    <table id="demo" lay-filter="test"></table>

    <script>
        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 312
                ,url: '/user/getData' //数据接口
                ,page: true //开启分页
                ,cols: [
                    [ //表头
                        {type:'checkbox', fixed: 'left'}
                        ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                        ,{field: 'username', title: '用户名', width:80}
                        ,{field: 'sex', title: '性别', width:80, sort: true, templet: function (data) {
                            return data.sex == '0' ? '女' : '男';
                        }}
                        ,{field: 'phone', title: '手机号码', width:100}
                        ,{field: 'email', title: '邮箱', width:100}
                        ,{field: 'status', title: '状态', width:80, templet: function (d) {
                            return d.status == '1' ? '启用' : '禁用';
                        }}
                        ,{field: 'birthday', title: '生日'}
                        ,{field: 'createTime', title: '创建时间'}
                        ,{fixed: 'right', title: '操作', toolbar: '#toolbar', width: 150}
                    ]
                ]
            });

        });
    </script>
</body>
</html>